uniapp小程序分包加载优化，图片分包记录 |
您所在的位置：网站首页 › uniapp 图片编辑 › uniapp小程序分包加载优化，图片分包记录 |
uniapp小程序分包加载优化，图片分包记录
|
因为小程序的大小有限制，单包不能超过2M,整包不能超过16M，如果小程序太大，不做分包处理的话就无法上传成功。 1、页面分包 详情查看https://uniapp.dcloud.io/collocation/pages?id=subpackages
如果分包的自定义组件只有分包里面才使用，那么这个组件文件夹可以放到分包里面，这样打包的时候就不会分包到主包里。tabBar的页面必须放在主包里。 2、根据目录再pages.json
注意：写在subPackages里面的pages的路径就不能写在pages里面了。 在HBuilderX中文件manifest.json中选择源码视图，找到mp-weixin添加“optimization”:{"subPackages":true}开启分包优化 3、图片的分包，因为static默认是被打包到主包的，如果图片比较多的话，也是会占用很多资源的，所以如果图片最好也做分包，可以放在新建的文件夹，比如images。 images文件夹下新建文件夹dataView、pages、personal,这几个文件夹的名字要和分包的文件夹一样，然后再images对应的分包文件夹下面在新建一个img文件夹放图片
然后再根目录下新建vue.config.js const path = require('path') const CopyWebpackPlugin = require('copy-webpack-plugin') module.exports = { configureWebpack: { plugins: [ new CopyWebpackPlugin([ { from: path.join(__dirname, '/images'), to: path.join(__dirname+'/unpackage/', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, '/') } ]) ] } }在根目录下命令行输入 npm install copy-webpack-plugin --save-dev分包内代码引用图片 图片分包的另一个方法: 在对应分包目录下新建static目录，然后将图片放到static目录下，这样也会把静态文件直接打包到分包内。
|
【本文地址】